<template>
  <div class="attendance-statistics">
    <div class="header">
      <router-link to="/main/renshi/kaoqing/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>考勤统计</h2>
    </div>

    <div class="content">
      <div class="filter-section">
        <el-form :inline="true" :model="filterForm">
          <el-form-item label="部门">
            <el-select v-model="filterForm.department" placeholder="请选择部门">
              <el-option label="全部" value=""></el-option>
              <el-option label="技术部" value="技术部"></el-option>
              <el-option label="人事部" value="人事部"></el-option>
              <el-option label="销售部" value="销售部"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="统计月份">
            <el-date-picker
              v-model="filterForm.month"
              type="month"
              placeholder="选择月份">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="statistics-cards">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="card-content">
                <div class="card-title">出勤天数</div>
                <div class="card-value">{{ statistics.workDays }}天</div>
                <div class="card-chart">
                  <el-progress :percentage="statistics.workDaysPercentage" :format="format"></el-progress>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="card-content">
                <div class="card-title">请假天数</div>
                <div class="card-value">{{ statistics.leaveDays }}天</div>
                <div class="card-chart">
                  <el-progress :percentage="statistics.leaveDaysPercentage" :format="format" status="warning"></el-progress>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="card-content">
                <div class="card-title">加班时长</div>
                <div class="card-value">{{ statistics.overtimeHours }}小时</div>
                <div class="card-chart">
                  <el-progress :percentage="statistics.overtimePercentage" :format="format" status="success"></el-progress>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="card-content">
                <div class="card-title">异常考勤</div>
                <div class="card-value">{{ statistics.abnormalCount }}次</div>
                <div class="card-chart">
                  <el-progress :percentage="statistics.abnormalPercentage" :format="format" status="exception"></el-progress>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div class="attendance-table">
        <el-table :data="attendanceList" style="width: 100%">
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="department" label="部门" width="120"></el-table-column>
          <el-table-column prop="workDays" label="出勤天数" width="120"></el-table-column>
          <el-table-column prop="leaveDays" label="请假天数" width="120"></el-table-column>
          <el-table-column prop="overtimeHours" label="加班时长" width="120">
            <template slot-scope="scope">
              {{ scope.row.overtimeHours }}小时
            </template>
          </el-table-column>
          <el-table-column prop="lateCount" label="迟到次数" width="120"></el-table-column>
          <el-table-column prop="earlyLeaveCount" label="早退次数" width="120"></el-table-column>
          <el-table-column prop="absentCount" label="旷工次数" width="120"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button size="mini" @click="viewDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="考勤详情" :visible.sync="detailDialogVisible" width="70%">
      <div class="attendance-detail" v-if="currentDetail">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="考勤记录" name="record">
            <el-calendar v-model="currentMonth">
              <template slot="dateCell" slot-scope="{date, data}">
                <div class="calendar-cell">
                  <p :class="data.isSelected ? 'is-selected' : ''">
                    {{ data.day.split('-').slice(2).join('') }}
                  </p>
                  <div class="attendance-status" v-if="getAttendanceStatus(date)">
                    {{ getAttendanceStatus(date) }}
                  </div>
                </div>
              </template>
            </el-calendar>
          </el-tab-pane>
          <el-tab-pane label="请假记录" name="leave">
            <el-table :data="currentDetail.leaveRecords" style="width: 100%">
              <el-table-column prop="type" label="请假类型" width="120"></el-table-column>
              <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
              <el-table-column prop="endTime" label="结束时间" width="180"></el-table-column>
              <el-table-column prop="duration" label="时长" width="120"></el-table-column>
              <el-table-column prop="reason" label="请假原因"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="加班记录" name="overtime">
            <el-table :data="currentDetail.overtimeRecords" style="width: 100%">
              <el-table-column prop="date" label="加班日期" width="180"></el-table-column>
              <el-table-column prop="duration" label="加班时长" width="120"></el-table-column>
              <el-table-column prop="type" label="加班类型" width="120"></el-table-column>
              <el-table-column prop="reason" label="加班原因"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterForm: {
        department: '',
        month: new Date()
      },
      statistics: {
        workDays: 22,
        workDaysPercentage: 88,
        leaveDays: 2,
        leaveDaysPercentage: 8,
        overtimeHours: 16,
        overtimePercentage: 20,
        abnormalCount: 3,
        abnormalPercentage: 12
      },
      attendanceList: [],
      detailDialogVisible: false,
      currentDetail: null,
      activeTab: 'record',
      currentMonth: new Date()
    }
  },
  created() {
    // TODO: 从后端获取考勤数据
    this.attendanceList = [
      {
        name: '张三',
        department: '技术部',
        workDays: 22,
        leaveDays: 2,
        overtimeHours: 16,
        lateCount: 1,
        earlyLeaveCount: 0,
        absentCount: 0
      }
    ]
  },
  methods: {
    format(percentage) {
      return percentage + '%'
    },
    handleSearch() {
      // TODO: 实现搜索功能
    },
    resetFilter() {
      this.filterForm = {
        department: '',
        month: new Date()
      }
    },
    viewDetail(row) {
      this.currentDetail = {
        ...row,
        leaveRecords: [
          {
            type: '年假',
            startTime: '2024-03-15 09:00:00',
            endTime: '2024-03-16 18:00:00',
            duration: '2天',
            reason: '休假'
          }
        ],
        overtimeRecords: [
          {
            date: '2024-03-10',
            duration: '4小时',
            type: '工作日加班',
            reason: '项目紧急'
          }
        ]
      }
      this.detailDialogVisible = true
    },
    getAttendanceStatus(date) {
      // TODO: 根据日期返回考勤状态
      return '正常'
    }
  }
}
</script>

<style lang="scss" scoped>
.attendance-statistics {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .filter-section {
    margin-bottom: 20px;
  }

  .statistics-cards {
    margin-bottom: 30px;

    .card-content {
      text-align: center;

      .card-title {
        font-size: 16px;
        color: #909399;
        margin-bottom: 10px;
      }

      .card-value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 15px;
      }
    }
  }

  .calendar-cell {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .attendance-status {
      font-size: 12px;
      color: #409EFF;
      margin-top: 4px;
    }
  }
}
</style> 